<template>
  <!-- self点击自己触发 -->
  <div class="dialog_container" v-show="visible">
    <div class="mask show"></div>
    <div class="dialog show" :style="{ width: width }">
      <!-- 头部放标题，关闭按钮 -->
      <div class="zh-header">
        <slot name="header">{{ title }}</slot>
        <button class="dialog_headerbtn">
          <i class="zh-icon-close" @click="close">X</i>
        </button>
      </div>
      <!-- 中间内容不确定-放插槽 -->
      <div class="dialog_body">
        <!-- 默认插槽 -->
        <slot></slot>
      </div>
      <!-- 底部内容不确定-放插槽 -->
      <div class="dialog_footer" v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
// 弹框组件-可配置标题,宽，高等属性
export default {
  // 组件名称
  name: "zh-dialog",
  // 组件参数 接收来自父组件的数据
  props: {
    width: {
      type: String,
      default: "80%",
    },
    title: {
      type: String,
      default: "默认标题",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  // 组件方法
  methods: {
    close() {
      //  this.visible=false  //注意不允许子组件直接更改父级props属性。因为组件会被不同页面调用,造成数据被共享。修改时出错。通过emit子传父发射出去
      this.$emit("update", !this.visible);
      //或者页面用修饰符调用。update：是被固定的也就是vue为我们约定好的名称部分。visible是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来
      // this.$emit('update:visible',this.visible)
    },
  },
};
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;

  &.show {
    animation: show-mask 0.3s linear forwards;
  }
}

.dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  transform: translate(-50%);
  z-index: 1000;
  width: 30%;

  .zh-header {
    padding: 20px 20px 10px;

    .dialog-title {
      line-height: 24px;
      font-size: 18px;
      color: #303133;
    }

    .dialog_headerbtn {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 0;
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
      font-size: 16px;

      .zh-icon-close {
        color: #909399;
        &:hover {
          color: blue;
        }
      }
    }
  }

  .dialog_body {
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .dialog_footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px 20px;
    box-sizing: border-box;
  }
  &.show {
    animation: show-dialog 0.3s linear forwards;
  }
}

@keyframes show-dialog {
  0% {
    opacity: 0;
    margin-top: 0;
  }

  100% {
    opacity: 1;
    margin-top: 30px;
  }
}

@keyframes show-mask {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}
</style>
